<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/baokuan.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			
			#h_top {
				width: 100%;
				height: 40px;
				background-color: #F8F8F8;
				border-bottom: 1px solid #DEDEDE;
			}
			
			#h_top_main {
				width: 1000px;
				height: 40px;
				margin: 0px auto;
				background-color: #FFFFFF;
				border: 1px solid #C4D5E0;
				border-radius: 6px;
				padding-left: 20px;
			}
			
			#h_top_main a {
				color: #999999;
				margin-left: 5px;
				line-height: 36px;
				font-weight: bold;
			}
			
			#h_top_main a:hover {
				color: red;
			}
			
			.sj_tb {
				color: #FF6600;
				font-size: 8px;
			}
			
			.mykb_hover {
				/*display: none;*/
				position: absolute;
				top: 40px;
				width: 100px;
				
				/*border: 1px solid #DEDEDE;*/
			}
			
			.mykb_hover ul {
				position: relative;
				right: -5px;
				border: 1px solid #DEDEDE;
				border-top: none;
				height: 80px;
				background-color: #FFFFFF;
			}
			
			.mykb_hover ul li {
				margin-left: 3px;
			}
			
			.h_my_kb {
				border: 1px solid #DEDEDE;
				padding: 7px 0px 14px 0px;
				border-bottom: none;
				background-color: #FFFFFF;
			}
			
			.h_top_span{
				margin: 7px;
			}
			
			.h_top_right li{
				float: left;
				margin-left: 10px;
			}
			#h_mid{
				width: 100%;
				background-image: url(img/第二个页面/main_bgi.png);
			}
			#h_mid_main{
				width: 1000px;
				margin: 0px auto;
			}
			#little_logo{
				margin: 22px 0px;
			}
			.h_mid_title{
				height: 100px;
			}
			#h_keyword{
				background-color: #FFFFDF;
				border-radius: 5px;
				width: 210px;
				height: 28px;
				box-shadow: 0px -3px 1px #FFB775;
				text-indent: 0.5em;
			}
			#h_title_ul{
				
			}
			#h_title_ul li{
				float: left;
				margin-top: 25px;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				color: #FFFFFF;
				font-weight: bolder;
				background-color: #F9703A;
				padding: 0px 20px;
				border-right: 1px solid #D65700;
			}
			.yuanjiao5_l{
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}
			.yuanjiao5_r{
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
				width: 290px;
				text-align: right;
			}
			#fangdajing{
				position: relative;
				left: 210px;
				top: 5px;
			}
		</style>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script>
			function my_kb_hover(par) {
				var h_a = par;
				var h_a_hover = par.nextElementSibling;
				//				console.log(h_a_hover.nodeName);
				h_a_hover.style.display = "block";
				h_a.className = "h_my_kb";
			}

			function my_kb_yincang(par) {
				var h_a = par.parentNode.previousElementSibling;
				//				console.log(h_a.nodeName);
				var h_a_hover = par.parentNode;
				h_a_hover.style.display = "none";
				h_a.className = "";
			}
			$(function() {
					$("#title_input").mouseover(function() {
					$("#block").animate({
						width: "90%",
						height: "100%",
						fontSize: "10em",
						borderwidth: 10
					}, 1000);
				});
			});
		</script>
	</head>

	<body>
		<div id="h_top">
			<div id="h_top_main">
				<div class="hzs_fl f14">
					<a>Hi 昵称</a>
					<a href="#">卡布商城</a>
					<a href="#">退出</a>
				</div>
				<ul class="h_top_right hzs_fr f14">
					<li>
						<div>
							<a href="#" onmouseover="my_kb_hover(this)"><span class="h_top_span">我的卡布<i class="iconfont sj_tb">&#xe6d5;</i></span></a>
							<div class="mykb_hover" style="display: none;">
								<ul onmouseleave="my_kb_yincang(this)">
									<li>
										<a href="#">我的订单</a>
									</li>
									<li>
										<a href="#">我的优惠券</a>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#" onmouseover="my_kb_hover(this)"><span class="h_top_span"><i class="iconfont f15">&#xe670;</i>购物车<span style="color: #FF6600;">0</span>种商品<i class="iconfont sj_tb">&#xe6d5;</i></span></a>
						<div class="mykb_hover" style="display: none;">
							<ul style="width: 250px; height: 45px;" onmouseleave="my_kb_yincang(this)">
								<li>您的购物车中暂无商品，赶快选择心爱的商品吧！</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="#" onmouseover="my_kb_hover(this)"><span class="h_top_span">我的收藏<i class="iconfont sj_tb">&#xe6d5;</i></span></a>
						<div class="mykb_hover" style="display: none;">
							<ul onmouseleave="my_kb_yincang(this)">
								<li>
									<a href="#">收藏的商品</a>
								</li>
								<li>
									<a href="#">收藏的店铺</a>
								</li>
							</ul>
						</div>
					</li>
				</ul>

			</div>
		</div>
		<div id="h_mid">
			<div id="h_mid_main">
				<div class="h_mid_title">
					<div class="hzs_fl">
						<img src="img/第二个页面/kb_little_logo.png" id="little_logo" />
					</div>
					<div class="hzs_fr">
						<ul id="h_title_ul">
							<li class="yuanjiao5_l">买家首页</li>
							<li>站内信</li>
							<li>设置</li>
							<li style="width: 200px;"></li>
							<li class="yuanjiao5_r" id="title_input">
								<img src="img/第二个页面/fangdajing_huang.png" id="fangdajing"/>
								<input type="text" id="h_keyword" value="" placeholder="请输入关键词" />
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>